<template>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
import 'echarts-gl'
import { createChartOption } from './option.js'; // 确保路径正确
import * as echarts from 'echarts'
import axios from 'axios'

export default {
    props: {
        Data: {
            type: Array,
            required: true
        }
    },
    data() { 
        return {
            chartInstance2: null,
            resizeObserver: null,
            optionsData: [],
            loading: false,
            error: null
        };
    },
    watch: {
        Data: {
            handler(newData) {
                if (newData && newData.length > 0) {
                    this.updateData(newData);
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.initChart();
        this.fetchFishingTypesData();
    },
    methods: {
        initChart() {
            if (this.$refs.chartContainer) {
                this.chartInstance2 = echarts.init(this.$refs.chartContainer, this.$echartsConfig.theme);
                this.resizeObserver = new ResizeObserver(() => {
                    this.chartInstance2 && this.chartInstance2.resize();
                });
                this.resizeObserver.observe(this.$refs.chartContainer);
            }
        },
        updateChart() {
            if (!this.chartInstance2) return;
            
            const option = createChartOption(this.optionsData);
            this.chartInstance2.setOption(option, true);
        },
        updateData(newData) {
            this.optionsData = newData;
            this.updateChart();
        },
        async fetchFishingTypesData() {
            try {
                this.loading = true;
                this.error = null;
                
                const response = await axios.get('/getdata/fishing-types/');
                
                if (response.data.code === 200) {
                    // 如果没有传入props数据，则使用API数据
                    if (!this.Data || this.Data.length === 0) {
                        this.optionsData = response.data.data;
                        this.updateChart();
                    }
                } else {
                    this.error = response.data.message || '获取数据失败';
                    console.error('获取渔获类型数据失败:', this.error);
                }
            } catch (error) {
                this.error = error.message || '获取数据失败';
                console.error('获取渔获类型数据出错:', error);
                
                // 如果API请求失败，使用默认数据
                if (!this.Data || this.Data.length === 0) {
                    this.optionsData = [
                        { name: '鱿鱼', value: 2000, itemStyle: { color: 'rgba(179,229,251,1)' } },
                        { name: '金枪鱼', value: 1000, itemStyle: { color: 'rgba(250,210,95,1)' } },
                        { name: '秋刀鱼', value: 100, itemStyle: { color: 'rgba(249,170,114,1)' } },
                        { name: '鲣鱼', value: 200, itemStyle: { color: 'rgba(79,191,227,1)' } }
                    ];
                    this.updateChart();
                }
            } finally {
                this.loading = false;
            }
        }
    },
    beforeDestroy() {
        if (this.chartInstance2) {
            this.chartInstance2.dispose();
        }
        if (this.resizeObserver && this.$refs.chartContainer) {
            this.resizeObserver.unobserve(this.$refs.chartContainer);
            this.resizeObserver.disconnect();
        }
    }
};
</script>